<template>
	<view class="content">

		<scroll-view class="menu-wrapper" scroll-y :style="'height:'+height+'px'">
			<view ref="menuWrapper">
				<!--  :class="{'current': currentIndex == index}" @click="selectMenu(index,$event)" -->
				<view style="position: relative;" v-for="(item,index) in goods" :key="index" ref="menuList" @click="select(item.id, index)"
				 :class="{'current': currentIndex == item.id}">

					<view class="menu-item">{{item.name}}</view>
					<text class="allcount" v-if="getAllCount>=item.count&&item.count>0">{{item.count}}</text>
					<!-- <text class="allcount">1</text> -->
				</view>
			</view>
		</scroll-view>
		<!--  @scroll="scroll" -->
		<scroll-view class="foods-wrapper" scroll-y :style="'height:'+height+'px'" :scroll-top="foodSTop">
			<view ref="foodsWrapper">
				<view ref="foodList" class="foods" v-for="(item, i) in goods" :key="i">

					<!-- <view class="food-title" style="background: #f3f5f7">
						{{item.name}}
					</view> -->
					<view class="food" v-for="(food, index) in item.foods" :key="index">
						<image :src="food.image" mode="" style="width: 75px;height: 75px;margin-top: 6px;"></image>
						<view class="food-info">
							<text style="font-size: 15px;margin-top: 2px;">{{food.name}}</text>
							<text style="font-size: 13px;margin: 2px 0;">商品信息: {{food.info}}</text>
							<text style="font-size: 13px;margin: 2px 0 4px;">规格: {{food.size}}&nbsp;&nbsp;&nbsp;&nbsp;库存: {{food.stock}}</text>

							<!-- 加减 -->
							<view class="food-btm">
								<text class="food-price">￥{{food.piceCs}}</text>
								<cartcontrol :food="food" @add="addCart" @dec="decreaseCart"></cartcontrol>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<shopcart :goods="goods" @add="addCart" @pay="pay" @dec="decreaseCart" @delAll="delAll"></shopcart>
	</view>
</template>

<script>
	import shopcart from '@/components/shop-cart/shopcart.vue';
	import cartcontrol from '@/components/shop-cart/cartcontrol.vue'
	import Vue from 'vue'
	// import BScroll from 'better-scroll'

	export default {
		data() {
			return {
				goods: this.$store.getters.getCart,
				belongId: '',
				height: 0,
				foodSTop: 0,
				currentIndex: 0
			}

		},
		components: {
			shopcart,
			cartcontrol
		},
		onLoad(option) {
			this.belongId = option.id
			this.height = Number(uni.getSystemInfoSync().windowHeight) - 55;
			// console.log(uni.getSystemInfoSync().windowHeight)
		},

		computed: {
			getList() {
				let result = [];
				this.goods.forEach((good) => {

					good.foods.forEach((food) => {

						if (food.count) {
							result.push(food)
						}
					})
				})
				// console.log('result', result);
				return result

			},
			// 获得购物车所有商品数量
			getAllCount: function(item) {
				// console.log('item', item)
				let result = [];
				let count = 0;
				
				for (let i = 0; i < this.goods.length; i++) {
					count = 0;
					this.goods[i].foods.forEach((food) => {

						// console.log('food',food);
						if (food.count >= 0) {
							count += food.count
							Vue.set(this.goods[i], 'count', count)
						}
					})
					// console.log('result', count);
					result.push(count)
				}

				result.sort(function(a, b) {
					return a - b;
				})
				count = result[result.length - 1]
				// console.log('result', count);
				return count;
			},

		},
		mounted() {
			// 加载分类，商品
			let params = {
				page: 1,
				limit: 99999,
			};
			//if(this.$store.getters.getCart == '') {
				this.init(params);
			//}
		},
		methods: {
			// 获取分类显示到页面
			init(params) {
				this.$api.selectGoodType(params).then((res) => {
					let goodsym = []
					res.rows.forEach((item, index) => {
						let arr = {
							id: item.id,
							name: item.name,
							foods: []
						}
						goodsym.push(arr)
					})
					
					this.currentIndex = params.typeId = goodsym[0].id
					this.getGoodsByTypeId(params, (callback) => {
						if (callback.rows == null) {
							goodsym[0].foods = []
							this.goods = goodsym
							return
						}
						goodsym[0].foods = callback.rows
						this.goods = goodsym
					})
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			
			// 根据分类 typeId 获取商品信息
			getGoodsByTypeId(params, callback) {
				// 获取上架商品
				params.status = 1
				params.classLevel = 1
				params.belongId = uni.getStorageSync('user').superiorid
				this.$api.getCommoditys(params).then((res) => {
					callback(res)
				}).catch((err) => {
					console.log('request fail', err);
				})
			},

			// 点击侧边栏
			select(id, index) {
				this.currentIndex = id;
				
				let params = {
					page: 1,
					limit: 99999,
				};
				params.typeId = id
				this.getGoodsByTypeId(params, (callback) => {
					if (callback.rows == null) {
						this.goods[index].foods = []
					} else {
						this.goods[index].foods = callback.rows
					}
				})
				this.setScrollH(index);
			},

			// 设置点击侧边栏右边滚动的高度
			setScrollH: function(index) {
				var that = this;
				let height = 0;
				var query = uni.createSelectorQuery();
				// console.log('query',query);
				let foods = query.selectAll('.foods');
				// console.log('foods', foods);

				this.$nextTick(function() {
					foods.fields({
						size: true
					}, data => {
						if (index == 0) {
							that.foodSTop = 0;
						}
						
						for (let i = 0; i < index; i++) {

							height += parseInt(data[i].height);
							// console.log('fh', foods);
							that.foodSTop = height;
							// console.log(that.foodSTop)
						}

					}).exec();
				})

			},

			// 结算
			pay(item) {
				if (this.getAllCount  === 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择商品",
					})
					return
				}
				uni.setStorageSync('checkGoods', item)
				uni.navigateTo({
					url: '../checkGoods/checkGoods?id=' + this.belongId
				})
			},
			
			// 加入购物车
			addCart(item) {
				let cart = {
					goods: this.goods,
					good: item
				}
				// 把添加商品功能交给 vuex 管理
				this.$store.dispatch('addCart', cart)
			},
			
			// 减少购物车
			decreaseCart(item) {
				let cart = {
					goods: this.goods,
					good: item
				}
				// 把减少商品功能交给 vuex 管理
				this.$store.dispatch('delCart', cart)
			},
			// 清空购物车
			delAll() {
				let cart = {
					goods: this.goods,
				}
				this.$store.dispatch('delAll', cart)
			}
		}
	}
</script>

<style>
	.content {
		/* text-align: center; */
		/* height: 400upx; */
		display: flex;
		position: absolute;
		top: 0;
		bottom: 55px;
		width: 100%;
		overflow: hidden;
	}

	.current {
		position: relative;
		z-index: 0;
		background-color: #fff;
		color: #00A0DC;
	}

	.menu-wrapper {
		text-align: center;
		width: 22%;
		display: flex;
		flex-direction: column;
		background: #f3f5f7;

	}

	.menu-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
	}

	.allcount {
		position: absolute;
		right: 6px;
		top: 8px;
		display: inline-block;
		padding: 0 4px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 50%;
		background-color: #f01414;
		color: #ffffff;
	}

	.foods-wrapper {
		margin-left: 4px;
		width: 78%;
	}

	.food,
	.food-btm,
	.content {
		display: flex;
		flex-direction: row;
	}

	.food-title {
		padding: 2px 0;
	}

	.food-info {
		margin-left: 10px;
		margin-right: 16px;
		display: flex;
		flex-direction: column;
		flex: 2;
	}

	.food-btm {
		justify-content: space-between;

	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}
</style>
